<template>
  <div class="singer-simple">
    <div class="sim-singer">
      <ul>
        <li v-for="(item,index) in artists" :key="index" @click="itemClick(item)">
          <img v-lazy="item.img1v1Url" alt="">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SimpleSinger',
  props: {
    artists: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    itemClick(item) {
      window.sessionStorage.setItem('singerId', item.id)
      this.$emit('simClick')
    }
  }
}
</script>

<style lang="less" scoped>
.singer-simple {
  .sim-singer {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        display: flex;
        flex-direction: column;
        width: 17%;
        margin: 15px 20px;
        text-align: center;
        img {
          width: 100%;
        }
        span {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>